<script setup lang="ts">
import Switch from '@/components/Form/Switch'
import { ref } from 'vue';
import Button from '@/components/Base/Button'
// import Hello from '@/components/HelloWorld/HelloWorld.vue'
import CkSplitPane from '@/components/layout/SplitPane/index.ts'
const isChecked = ref(false)
</script>

<template>
  <div class="app-box">
    <Switch v-model="isChecked">21</Switch>
  <CkSplitPane
      id="4"
      split="vertical"
      bagColor="#fff"
      :default-percent="'200px'"
      :folding="true"
      folding-type="hidden"
    >  <template #paneL>
    <div>
      <Button> 123</Button>
    </div>
    </template>
    <template #paneR>
  <div>
    <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <Button> 123</Button>
  </div>
 
    </template>
  
  </CkSplitPane>

</div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.app-box {
  width: 100vw;
  height: 100vh;
}
</style>
